<template id="PersonTable">
  <div class="PersonTable">
    <FOURCONCOR />
    <i class="close" @click="changeBoxShow"></i>
    <PaddingCom :title="'人员管控'">
      <PersonnelCom style="margin-bottom: 8px" />
      <el-divider></el-divider>
      <publicInput
        class="publicinput"
        :titleName="'企业名称'"
        :option="options"
        @changeId="companyPersonnelid"
      />
     <div style="height:15.24vw">
        <Personactive
        class="Personactive"
        :lineData="lineData"
        v-if="lineData.length"
      />
      <!-- <div class="bottomContainer"> -->
      <!--<companypersonnelNew :list="barData" v-if="barData.length" />-->
      <Compersonnelzx
        :list="barData"
        v-if="barData.length"
        :title="''"
        class="comperbox"
      />
     </div>

      <!-- <Companypersonnel
          :companyuserData="companyuserData"
          v-if="companyuserData.length"
        />
        <div style="width: 50%">
          <publicInput
            class="publicinput"
            :titleName="'企业名称'"
            :option="options"
            @changeId="companyPersonnelid"
          />
          <Companypersonnelpie
            :offiandtempuser="offiandtempuser"
            v-if="offiandtempuser.length"
          />
        </div> -->
      <!-- </div> -->
    </PaddingCom>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import PaddingCom from "components/paddingCom";
import PersonnelCom from "components/personnelCom";
import Personactive from "components/echarts/personActive";
import Companypersonnel from "components/echarts/Companypersonnel";
import companypersonnelNew from "components/echarts/companypersonnel-new";
import Compersonnelzx from "components/echarts/Compersonnelzx";

import Companypersonnelpie from "components/echarts/Companypersonnelpie";
import publicInput from "components/publicInput";
import FOURCONCOR from "components/fourCorner";
import { userinandout } from "api/zdh";
import { companyuser } from "api/zdh";
import { offiandtempuser } from "api/zdh";
import { companylist } from "api/zdh";
import { userinandoutbyhour } from "api/zdh";
import BlueBox2 from "components/blueBox2";
export default {
  name: "PersonTable",
  components: {
    PaddingCom,
    PersonnelCom,
    Personactive,
    Companypersonnel,
    publicInput,
    companypersonnelNew,
    Companypersonnelpie,
    Compersonnelzx,
    FOURCONCOR,
    BlueBox2,
  },
  // 定义属性
  data() {
    return {
      fontColor: {
        color: "rgb(247, 248, 149)",
      },
      lineData: [],
      barData: [],
      companyuserData: [],
      offiandtempuser: [],
      companylist: [],
      options: [
        {
          value: "选项12",
          label: "黄金糕23",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    companyPersonnelid(value) {
      this.getUserinandout(value);
      this.getUserinandoutbyhour(value);
    },
    // text(value){
    //   this.getOffiandtempuser(value)
    // },
    // 获取人员进出统计echars折线图数据
    async getUserinandout(value) {
      this.lineData = [];
      if (!value) {
        let res = await userinandout();
        if (this.$iscode(res)) {
          const { data } = res;
          this.lineData.push(data);
        }
      } else {
        let res = await userinandout({
          enterprise_id: value,
        });
        if (this.$iscode(res)) {
          const { data } = res;
          this.lineData.push(data);
        }
      }
    },
    // 获取人员分布统计echars柱状图数据
    async getUserinandoutbyhour(value) {
      this.barData = [];
      if (!value) {
        let res = await userinandoutbyhour();
        if (this.$iscode(res)) {
          const { data } = res;
          this.barData.push(data);
        }
      } else {
        let res = await userinandoutbyhour({
          enterprise_id: value,
        });
        if (this.$iscode(res)) {
          const { data } = res;
          this.barData.push(data);
        }
      }
    },
    //获取公司人员分布统计柱状图
    async getCompanyuser() {
      this.companyuserData = [];
      let res = await companyuser();
      if (this.$iscode(res)) {
        const { data } = res;
        this.companyuserData.push(data);
      }
    },
    //获取公司人员分布统计饼状图
    async getOffiandtempuser(offtempuser) {
      this.offiandtempuser = [];
      let res = await offiandtempuser({
        id: offtempuser,
      });
      if (this.$iscode(res)) {
        const { data } = res;
        this.offiandtempuser.push(data);
        //console.log("self", this.offiandtempuser);
      }
    },
    //公司列表作用筛选(饼状图)
    async getCompanylist() {
      this.companylist = [];
      let res = await companylist();
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        list.length && (this.companylist = this.companylist.concat(list));
        this.options = this.companylist.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
      }
    },
    changeBoxShow() {
      this.$emit("showbox", false);
    },
    //关闭表格
    close() {
      this.$emit(close, false);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getUserinandout();
    this.getCompanyuser();
    // this.getOffiandtempuser();
    this.getCompanylist();
    this.getUserinandoutbyhour();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.PersonTable {
  position: relative;
  padding: 0.78vw 0.78vw;
width: 19vw;

  background: rgba(11, 58, 113, 0.9);
  .close {
    width: 0.5vw;
    height: 0.5vw;
    display: block;
    position: absolute;
    right: 0.5vw;
    top: 0.5vw;
    background: url("../../../../../../assets/images/indexBody/amapDialog/closeButton.png");
    background-size: 100% 100%;
  }
}
.Personactive {
  margin: 1.5vw 0 1.04vw 0;
}
// .bottomContainer {
//   // display: flex;
//   width: 100%;
// }
// .bottomContainer Companypersonnel {
//   width: 50%;
// }
// .bottomContainer Companypersonnelpie {
//   width: 50%;
// }
.el-divider--horizontal {
  margin: 0;
}
.el-divider {
  background: #499be7;
}
.publicinput {
  position: absolute;
  width: 20%;
  right: 0;
  // padding: 0.38vw 0 0 0;
}
/deep/ .el-select {
  float: right;
}
.comperbox {
  height: 6.4vw;
}
</style>
